<!--
 * @Author: guo wei
 * @LastEditors: [guo wei]
 * @LastEditTime: 2024-01-04 20:19:31
 * @Description: 
-->
<template>
  <div class="card-wrap">
    <el-tabs type="card">
      <el-tab-pane label="色系管理">
        <ColorManagement></ColorManagement>
      </el-tab-pane>
      <el-tab-pane label="档次管理">
        <GradeManagement></GradeManagement>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";

import ColorManagement from "./components/color";
import GradeManagement from "./components/grade";
const dialogVisible = ref(false);
const ruleFormRef = ref();
const ruleForm = reactive({
  color: "",
  name: "",
});
const dialogTitle = ref("添加色系");
const dialogType = ref("add");
const currentRowId = ref("");
const handleEdit = (index, row) => {
  console.log(index, row);
  dialogVisible.value = true;
  dialogTitle.value = "编辑色系";
  dialogType.value = "edit";
  currentRowId.value = row.id;
};
const handleAdd = () => {
  dialogVisible.value = true;
  dialogTitle.value = "添加色系";
  dialogType.value = "add";
  currentRowId.value = "";
};
const confirmCreateType = async () => {
  if (!ruleFormRef.value) return;
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      dialogVisible.value = false;
      if (dialogType.value == "add") {
        // tableData.value = tableData.value.map(x=>{
        //   return {}
        // })
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
const tableData = ref([
  {
    id: 1,
    name: "红",
  },
  {
    id: 2,
    name: "橙",
  },
  {
    id: 3,
    name: "黄",
  },
  {
    id: 4,
    name: "绿",
  },
  {
    id: 5,
    name: "青",
  },
  {
    id: 6,
    name: "蓝",
  },
  {
    id: 7,
    name: "紫",
  },
]);
</script>
<style lang="scss" scoped>
.card-wrap {
  margin: 20px;
}
</style>
